<div nz-row class="mb30">
  <button nz-button nzType="primary" nzSize="large" nzShape="circle" (click)="add()">
    <i nz-icon nzType="plus" nzTheme="outline"></i>
  </button>

  <button nz-button nzType="primary" nzSize="large" nzShape="circle" class="float-right" (click)="loadData()">
    <i nz-icon nzType="reload" nzTheme="outline"></i></button>
</div>
<div nz-row>
  <nz-card [nzBordered]="false" nzTitle="服务器列表">
    <nz-table #basicTable [nzData]="list"
              [nzShowPagination]="false"
              [nzLoading]="loadingFlag"
    >
      <thead>
      <tr>
        <th>别名</th>
        <th>IP</th>
        <th>docker版本</th>
        <th>kubectl版本</th>
        <th>helm版本</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data;let i = index">
        <td>
          <a [routerLink]="'/server/detail/'+data.id">{{ data.name }}</a>
        </td>
        <td>
          {{ data.host }}
          <i nz-icon nzType="copy" nzTheme="outline" class="cursor-pointer" nz-tooltip nzTooltipTitle="复制"
             (click)="copyMessage(data.host)"></i>
        </td>
        <td>
          <ng-container *ngIf="data.dockerFlag == null || data.dockerFlag == 'uninstall'">
            <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.dockerLoading"
                    (click)="install('docker',i)">
              安装
            </button>
          </ng-container>
          <ng-container *ngIf="data.dockerFlag == 'installing'">
            <button nz-button nzType="primary" nzLoading>
              安装中
            </button>
          </ng-container>
          <ng-container *ngIf="data.dockerFlag == 'installed'">
            {{data.dockerVersion}}
          </ng-container>
          <ng-container *ngIf="data.dockerFlag == 'install_failed'">
            安装失败，请
            <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.loading" (click)="refresh(i)">刷新
            </button>
            后重新安装
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="data.kubectlFlag == null || data.kubectlFlag == 'uninstall'">
            <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.kubectlLoading"
                    (click)="install('kubectl',i)">
              安装
            </button>
          </ng-container>
          <ng-container *ngIf="data.kubectlFlag == 'installing'">
            <button nz-button nzType="primary" nzLoading>
              安装中
            </button>
          </ng-container>
          <ng-container *ngIf="data.kubectlFlag == 'installed'">
            {{data.kubectlVersion}}
          </ng-container>
          <ng-container *ngIf="data.kubectlFlag == 'install_failed'">
            安装失败，请
            <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.loading" (click)="refresh(i)">刷新
            </button>
            后重新安装
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="data.helmFlag == null || data.helmFlag == 'uninstall'">
            <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.helmLoading"
                    (click)="install('helm',i)">
              安装
            </button>
          </ng-container>
          <ng-container *ngIf="data.helmFlag == 'installing'">
            <button nz-button nzType="primary" nzLoading>
              安装中
            </button>
          </ng-container>
          <ng-container *ngIf="data.helmFlag == 'installed'">
            {{data.helmVersion}}
          </ng-container>
          <ng-container *ngIf="data.helmFlag == 'install_failed'">
            安装失败，请
            <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.loading" (click)="refresh(i)">刷新
            </button>
            后重新安装
          </ng-container>
        </td>
        <td>{{ data.createAt | date:'yyyy-MM-dd HH:mm' }}</td>
        <td>
          <button nz-button nzType="primary" nzSize="small" [nzLoading]="data.loading" (click)="refresh(i)">刷新</button>
          <nz-divider nzType="vertical"></nz-divider>
          <button nz-button nzType="danger" nzSize="small" (click)="delete(data.id)">删除
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </nz-card>
</div>
<nz-row class="mt10">
  <nz-pagination class="float-right" [nzHideOnSinglePage]="true"
                 [nzPageIndex]="param.pageNo" [nzTotal]="param.count" [nzPageSize]="param.pageSize" nzSimple
                 (nzPageIndexChange)="pageChange($event)"
  ></nz-pagination>
</nz-row>


<nz-modal [(nzVisible)]="isVisible" nzTitle="请确认" (nzOnCancel)="isVisible = false" (nzOnOk)="okCallback()"
          [nzOkLoading]="btnLoading">
  <p>确认要删除吗？</p>
</nz-modal>
